<template>
  <div>
    <div class="cm-tit mt20 clearfix">
      <el-dialog :title="title" :visible.sync="boxmodel" width="30%" center :before-close="cancel">
        <div style="max-height: 500px; overflow: auto;">
          <el-form :ref="reffrom" :model="boxParams" :rules="boxrules" label-width="120px" class="demo-boxParams">
            <el-form-item v-for="(item, i) of data" :key="i" :label="item.label" :disabled="item.disabled" :prop="item.props">
              <el-input v-show="item.type == 'input'" v-model.trim="boxParams[item.props]" style="width: 80%;" :disabled="item.disabled" :placeholder="item.placeholder" />
              <el-input v-show="item.type == 'inputNumber'" v-model.trim="boxParams[item.props]" style="width: 80%;" :disabled="item.disabled" :placeholder="item.placeholder" @input="boxParams[item.props] = boxParams[item.props].replace(/[^\d]/g, '')" />
              <div>
                <el-select v-show="item.type == 'options'" v-model.trim="boxParams[item.props]" style="width: 80%;" :disabled="item.disabled" :placeholder="item.placeholder" clearable @change="duduxia(boxParams[item.props])">
                  <el-option v-for="(item1, y) of item.optionsdata" :key="y" :label="item1.label" :value="item1.value" />
                </el-select>
              </div>
              <div>
                <el-date-picker v-show="item.type == 'datetimerange'" v-model.trim="boxParams[item.props]" style="width: 80%;" :disabled="item.disabled" :type="item.type" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" />
              </div>
              <el-input v-show="item.type == 'textarea'" v-model.trim="boxParams[item.props]" style="width: 80%;" :disabled="item.disabled" :type="item.type" :placeholder="item.placeholder" :rows="5" />
            </el-form-item>
          </el-form>
        </div>

        <span v-show="title != '查看详情'" slot="footer" class="addmodel-footer">
          <el-button type="primary" @click="submit(reffrom)">提 交</el-button>
          <el-button @click="cancel(reffrom)">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  props: ['boxfromdata', 'reffrom', 'title', 'params'],
  data() {
    return {
      data: [],
      boxrules: {},
      boxmodel: false,
      modeltitle: '',
      boxParams: {}
    }
  },
  created() {},
  mounted() {
    this.data = this.boxfromdata
    const arr = this.data
    this.setreule(this.data)
    this.boxrules = this.setreule(this.data)
  },
  methods: {
    setreule(arr) {
      const obj = {}
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].require == undefined) {
          obj[arr[i].props] = [{ required: true, message: arr[i].placeholder, trigger: arr[i].type == 'options' ? 'change' : 'blur' }]
        }
      }
      return obj
    },
    showSure() {
      this.boxmodel = true
      this.$nextTick(() => {
        if (this.title == '新增') {
          this.boxrules = this.setreule(this.data)
          this.boxParams = {}
        } else if (this.title == '编辑') {
          this.boxrules = this.setreule(this.data)
          this.boxParams = {
            ...this.params
          }
        } else if (this.title == '查看详情') {
          const arr = this.data
          for (let i = 0; i < arr.length; i++) {
            this.$set(arr[i], 'disabled', true)
          }
          this.boxrules = {}
        }
      })
    },
    duduxia(aaa) {
      console.log(aaa)
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit('boxSubmit', this.boxParams)
          this.boxmodel = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.boxmodel = false
      this.boxParams = {}
      this.$refs[this.reffrom].resetFields()
      this.data.forEach(el => {
        el.disabled = false
      })
    },
    handleClose(formName) {
      this.boxmodel = false
      this.boxParams = {}
      this.$refs[this.reffrom].resetFields()
      this.data.forEach(el => {
        el.disabled = false
      })
    }
  }
}
</script>

<style></style>
